<template>
  <div class="c_income">
    <div class="head">
      <div class="h-head">
        <div class="left" @click="$router.back(-1)">
          <img src="../../assets/left.png" alt />
        </div>
      </div>
      <div class="tt1">
        <span class="hh1">USDT转账</span>
        <span class="hh2">
          <router-link to="/record" style="font-size:.4rem">转账记录</router-link>
        </span>
      </div>
      <div class="se_bz">
        <router-link to="/currency">
          <span style="font-size:.4rem">选择币种</span>
          <span style="font-size:.4rem">{{this.$store.state.currency}}</span>
        </router-link>
      </div>
    </div>
    <div class="zhjy">
      <div class="zczh">
        <router-link to="/out" style="color:#535353">
          <span class="xx1 g_color">从</span>
          <span class="xx2 f_weight">{{this.$store.state.out}}</span>
        </router-link>
      </div>
      <div class="zrzh">
        <span class="xx1 g_color">至</span>
        <span class="xx2 f_weight">USDT合约账户</span>
      </div>
      <img class="sxjt" src="../../assets/sxjt.png" alt />
    </div>
    <div class="zzsl">
      <p class="g_color" style="padding-top:10px;margin-bottom:15px">转账数量（USDT）</p>
      <input class="num_input" type="number" placeholder="0.00">
      <div style="height:.026667rem;background:#ede3e3;margin-left: 0.586667rem;
    margin-right: 0.586667rem;"></div>
      <div class="bot">
        <span style="color:#333;margin-top:.2rem">最多可转账:0000</span>
        <span style="color:#333;margin-top:.2rem">全部</span>
      </div>
    </div>
    <div class="z_pay">转账</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  created: function() {},
  mounted() {},
  computed: {},
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
::placeholder{
  color: #b5b5b5;
  font-size: .6rem;
}
::-webkit-input-placeholder{
  color: #b5b5b5;
  font-size: .6rem;
}
.c_income {
  .num_input{
    margin-left: 0;
    width:80%;
    padding-top:.213333rem;
    padding-bottom: .213333rem;
    margin-bottom: .046667rem;
    color: #000;
    font-size:.633333rem;
    margin-left: -0.533333rem;
    border: none;
  }
  .head {
    color: #fefeff;
    height: 5.146667rem;
    width: 100%;
    background: url(../../assets/b_blue.jpg) no-repeat;
    background-size: cover;
  }
  .h-head {
    color: #fefeff;
    width: 100%;
    height: 1.6rem;
    .f-flex();
    justify-content: space-between;
    .left {
      margin-left: 0.346667rem;
      .f-flex();
      font-size: 0.64rem;
      img {
        width: 0.293333rem;
        height: 0.48rem;
        margin-right: 0.266667rem;
      }
    }
    .right {
      font-size: 0.48rem;
      width: 100%;
      font-weight: bold;
      text-align: center;
      position: absolute;
    }
  }
  .tt1 {
    margin-left: 0.346667rem;
    margin-right: 0.346667rem;
    .f-flex();
    justify-content: space-between;
    .hh1 {
      font-size: 0.48rem;
      color: #fff;
    }
    .hh2 {
      color: #fff;
      a {
        color: #fff;
      }
    }
  }
  .se_bz {
    width: 9.413333rem;
    height: 1.013333rem;
    background: rgba(226, 226, 226, 0.3);
    margin: auto;
    margin-top: 0.773333rem;
    line-height: 1.013333rem;
    a {
      .f-flex();
      justify-content: space-between;
    }

    span {
      padding-left: 0.64rem;
      padding-right: 0.64rem;
    }
  }
  .zhjy {
    height: 2.24rem;
    width: 9.413333rem;
    background: #fff;
    margin: auto;
    margin-top: -0.533333rem;
    color: #535353;
    line-height: 1.12rem;
    position: relative;
    .sxjt {
      width: 0.533333rem;
      height: 0.533333rem;
      position: absolute;
      right: 0.053333rem;
      top: 50%;
      transform: translateY(-50%);
    }
    .zczh {
      height: 50%;
      border-bottom: 1px solid #999;
      margin-left: 0.586667rem;
      margin-right: 0.586667rem;
      font-size: .4rem;
      .f-flex();
    }
    .zrzh {
      height: 50%;
      margin-left: 0.586667rem;
      margin-right: 0.586667rem;
      font-size: .4rem;
      .f-flex();
    }
    .xx1 {
      margin-left: 0.1rem;
      margin-right: 2.88rem;
      text-align: left;
    }
  }
  .zzsl {
    padding-top: .266667rem;
    padding-bottom: .266667rem;
    width: 9.413333rem;
    background: #fff;
    margin: auto;
    margin-top: 0.266667rem;
    color: #535353;
    font-size: .4rem;
    p {
      margin-left: 0.586667rem;
      margin-right: 0.586667rem;
      text-align: left;
      padding-left: 0.053333rem;
    }
    div {
      margin-left: 0.586667rem;
      margin-right: 0.586667rem;
      padding-left: 0.053333rem;
    }
    .bot {
      height: 0.64rem;
      .f-flex();
      justify-content: space-between;
    }
  }
  .z_pay {
    width: 9.413333rem;
    height: 0.986667rem;
    margin: auto;
    margin-top: 1.386667rem;
    color: #fff;
    background: #546ce3;
    line-height: 0.986667rem;
    border-radius: 0.266667rem;
    font-size: 0.48rem;
  }
}
</style>

